<template>
  <div id="container">
    <div id="top">
      <div
        style="
          margin-left: 18%;
          width: 64%;
          height: 30px;
          display: inline-block;
          text-align: center;
          /* background-color: #fff; */
          /* box-shadow: 2px 2px 10px 2px #ddd; */
        "
      >
        <div style="text-align: center">
          <a-input-search
            placeholder="输入想要搜索的诗课"
            enter-button
            @search="search"
            style="width: 500px; height: 30px; margin-top: 15px"
            v-model:value="searchContent"
          />
        </div>
      </div>
    </div>
    <div id="form" v-if="ser">
      <div
        style="
          margin-left: 18%;
          width: 64%;
          height: 50px;
          display: inline-block;
          text-align: center;
          background-color: #fff;
          box-shadow: 2px 2px 10px 2px #ddd;
        "
      >
        <div style="height: 90%">
          <div class="form_content" @click="selectValue(0)">今日推荐</div>
          <div class="form_content" @click="selectValue(1)">先秦</div>
          <div class="form_content" @click="selectValue(2)">汉</div>
          <div class="form_content" @click="selectValue(3)">魏晋</div>
          <div class="form_content" @click="selectValue(4)">唐</div>
        </div>

        <div style="height: 10%">
          <div
            :class="{
              titleSelected: valueSelected == 0,
              line: valueSelected != 0,
            }"
          ></div>
          <div
            :class="{
              titleSelected: valueSelected == 1,
              line: valueSelected != 1,
            }"
          ></div>
          <div
            :class="{
              titleSelected: valueSelected == 2,
              line: valueSelected != 2,
            }"
          ></div>
          <div
            :class="{
              titleSelected: valueSelected == 3,
              line: valueSelected != 3,
            }"
          ></div>
          <div
            :class="{
              titleSelected: valueSelected == 4,
              line: valueSelected != 4,
            }"
          ></div>
        </div>
      </div>

      <div style="width: 10%; display: inline-block"></div>
    </div>

    <!-- 主页 -->
    <div id="picture" v-if="ser">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01fb106044dcf511013ef90f741696.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656756677&t=a6fb2e931dbbdd1ff29ddfbed5866c68"
        alt=""
        style="margin-left: 18%; width: 64%; height: 300px; margin-top: 0px"
      />
    </div>
    <div id="class" v-if="ser">
      <div id="content">
        <div
          v-for="img in imgs"
          :key="img.name"
          style="float: left; width: 22%; margin-left: 2.4%; margin-top: 20px"
        >
          <img :src="img.ids" class="img" @click="goVedio(img)" />
          <div style="margin-top: 10px">
            <p style="float: left; margin-left: 10px; margin-top: 10px">
              {{ img.title }}
            </p>
            <p style="float: left; margin-left: 10px; margin-top: 10px">
              {{ img.author }}
            </p>
            <p style="float: left; margin-left: 10px; margin-top: 10px">
              {{ img.tag }}
            </p>
          </div>
          <!-- <div
            style="
              clear: left;
              margin-left: 10px;
              width: 240px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ img.intro }}
          </div> -->
        </div>
      </div>
    </div>
    <div id="class" v-if="ser">
      <div id="content">
        <div
          v-for="img in imgs"
          :key="img.name"
          style="float: left; width: 22%; margin-left: 2.4%; margin-top: 20px"
        >
          <img :src="img.ids" class="img" @click="goVedio(img)" />
          <div>
            <p style="float: left; margin-left: 10px; margin-top: 10px">
              {{ img.title }}
            </p>
            <p style="float: left; margin-left: 10px; margin-top: 10px">
              {{ img.author }}
            </p>
            <p style="float: left; margin-left: 10px; margin-top: 10px">
              {{ img.tag }}
            </p>
          </div>
          <!-- <div
            style="
              clear: left;
              margin-left: 10px;
              width: 240px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ img.intro }}
          </div> -->
        </div>
      </div>
    </div>

    <!-- 搜索界面 -->
    <div id="search" v-if="!ser">
      <div id="content">
        <div>
          <div style="font-size: 24px; margin-left: 20px; float: left">
            全部结果
          </div>
          <a-button
            style="float: right; margin-right: 20px; margin-top: 5px"
            @click="goClass"
            >返回</a-button
          >
        </div>

        <div
          v-for="img in imgs"
          :key="img.name"
          style="
            margin-left: 32px;
            margin-top: 20px;
            margin-bottom: 10px;
            box-shadow: 2px 2px 10px 2px #ddd;
            width: 95%;
            display: inline-block;
          "
          @click="goVedio(img)"
        >
          <img
            :src="img.ids"
            style="height: 170px; width: 20%; margin-top: -120px"
          />
          <div style="height: 170px; width: 50%; display: inline-block">
            <p style="margin-left: 10px; font-size: 20px">{{ img.title }}</p>
            <p style="margin-left: 10px">作者：{{ img.author }}</p>
            <p
              style="
                margin-left: 10px;
                border-radius: 10px;
                border: 2px solid;
                width: 40px;
                border-color: rgb(203, 134, 145);
                text-align: center;
                background-color: rgb(203, 134, 145);
              "
            >
              {{ img.tag }}
            </p>
            <div
              style="
                clear: left;
                margin-left: 10px;
                width: auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              {{ img.intro }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "poetry",
  data() {
    return {
      exit: 0,
      username: "",
      password: "",
      imgs: [],
      ser: 1,
      searchContent: "",
      valueSelected: 0,
    };
  },
  created() {
    this.getVedio();
  },
  methods: {
    getVedio() {
      const url = "/course/getAll";
      this.$axios({
        method: "get",
        url: url,
      })
        .then((res) => {
          console.log(res);
          this.imgs = res.data.data;
          console.log(this.imgs);
          // for (let i = 0; i < this.imgs.length; i++) {
          //   this.imgs[i].ids =
          //     "http://47.108.176.163:7777/course_video/" +
          //     this.imgs[i].id +
          //     ".png";
          // }
          this.imgs[0].ids =
            "https://img2.baidu.com/it/u=1198649893,2806671500&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500";
          this.imgs[1].ids =
            "https://img2.baidu.com/it/u=2078783142,3109243785&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=459";
          this.imgs[2].ids =
            "https://img0.baidu.com/it/u=418110097,1751376015&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400";
          this.imgs[3].ids =
            "https://img2.baidu.com/it/u=2273018378,1013987961&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=331";
          //   this.imgs[0].id =
          //     "https://vd2.bdstatic.com/mda-mhj8008mkmw2qsrn/sc/cae_h264_nowatermark/1629438282484656164/mda-mhj8008mkmw2qsrn.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1656502126-0-0-0e6a6d38e474b35bac43fd04186a42f2&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=3526020663&vid=3982038869337809060&abtest=102784_2-102836_1-102976_2-103014_2-3000232_1&klogid=3526020663";
          //   this.imgs[1].id =
          //     "https://vd3.bdstatic.com/mda-mj89jbxbc85itp0x/sc/cae_h264/1633762235196767777/mda-mj89jbxbc85itp0x.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1656502179-0-0-d62cbfd35162d24f0ea42d9b4c589067&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=3579172700&vid=11165562454964134001&abtest=102784_2-102836_1-102976_2-103014_2-3000232_1&klogid=3579172700";
          //   this.imgs[2].id =
          //     "https://vd3.bdstatic.com/mda-ma9u7we7s779n93j/sc/cae_h264_nowatermark/1610280145/mda-ma9u7we7s779n93j.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1656502222-0-0-22d609c77fb5955ffc87adff09c30652&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=0022477187&vid=13167315977974918174&abtest=102784_2-102836_1-102976_2-103014_2-3000232_1&klogid=0022477187";
          //   this.imgs[3].id =
          //     "https://vd2.bdstatic.com/mda-ndiiwz5qz7d18uu1/720p/h264_delogo/1650374588247455601/mda-ndiiwz5qz7d18uu1.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1656501956-0-0-51d50eb9112e47289d0fc2bfaca1dbbb&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=3356245278&vid=4612119208995327926&abtest=102784_2-102836_1-102976_2-103014_2-3000232_1&klogid=3356245278";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goVedio(img) {
      this.$router.push({ name: "Vedio", params: img });
    },
    changeActive() {
      this.exit = 1;
    },
    removeActive() {
      this.exit = 1;
    },
    exits() {
      this.$router.push({ name: "Login", params: {} });
    },
    user() {
      this.$router.push({ name: "Info", params: {} });
    },
    search() {
      this.ser = 0;
      console.log(this.searchContent);
      if (this.searchContent == "") {
        this.getVedio();
      }
      this.imgs = this.imgs.filter((data) => {
        return data.title.includes(this.searchContent); //字符串相等匹配
      });
    },
    goClass() {
      this.getVedio();
      this.ser = 1;
    },
    selectValue(value) {
      this.valueSelected = value;
      console.log(this.valueSelected);
    },
  },
  mounted() {
    this.$emit("tellFather", { index: 1 });
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
}
#user {
  background-color: rgb(93, 134, 145);
  height: 40px;
  width: 100%;
}
#top {
  height: 80px;
  width: 100%;
  display: inline-block;
  margin-top: 15px;
}
#form {
  height: 50px;
  width: 100%;
  display: inline-block;
}
.form_content {
  font-weight: bold;
  font-size: 17px;
  width: 100px;
  border: 0ch;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.form_content:hover {
  color: rgb(2, 54, 224);
  cursor: pointer;
}
#picture {
  height: 300px;
  width: 100%;
  display: inline-block;
  margin-top: -7px;
}
#class {
  height: auto;
  width: 100%;
}
#content {
  margin-left: 18%;
  width: 64%;
  display: inline-block;
  margin-top: -7px;
  background-color: #fff;
  /* box-shadow: 2px 2px 10px 2px #ddd; */
  /* border-radius: 5px; */
}
.userMore:hover {
  opacity: 0.8;
}
.img {
  width: 100%;
  height: 150px;
  float: left;
}
.img:hover {
  cursor: pointer;
}
.titleSelected {
  background-color: rgb(0, 126, 252);
  float: left;
  height: 4px;
  width: 110px;
}
.line {
  /* background-color: rgb(191, 195, 199); */
  float: left;
  height: 4px;
  width: 110px;
}
</style>
